<page-header [title]="'数据源管理'"></page-header>

<nz-card [nzBordered]="false" style="margin-bottom: 16px;">
  <form nz-form style="line-height: 3;">
    <div nz-row>
      <div nz-col nzSpan="6">
        <nz-tag *ngFor="let i of categories; let idx = index" nzMode="checkable" [nzChecked]="i.value" (nzCheckedChange)="changeCategory($event, idx)">
          {{i.text}}
        </nz-tag>
      </div>
      <div nz-col nzSpan="18">
        <nz-input-group nzSearch [nzSuffix]="suffixIconButton">
          <input type="text" nz-input placeholder="input search text">
        </nz-input-group>
        <ng-template #suffixIconButton>
          <button nz-button nzType="primary" nzSearch><i nz-icon type="search"></i></button>
        </ng-template>
      </div>
    </div>
  </form>
</nz-card>

<nz-list [nzLoading]="false" [nzRenderItem]="item" [nzDataSource]="list" [nzGrid]="{gutter: 24, lg: 6, md: 8, sm: 12, xs: 24 }">
  <ng-template #item let-item>
    <nz-list-item>
      <nz-card nzHoverable [nzCover]="cover">
        <ng-template #cover>
          <img alt="{{item.title}}" src="{{item.cover}}">
        </ng-template>
        <nz-card-meta [nzTitle]="nzTitle" [nzDescription]="item.subDescription">
          <ng-template #nzTitle>
            <a>{{item.title}}</a>
          </ng-template>
        </nz-card-meta>
        <!--<div class="card-item-content">-->
          <!--<span class="text-grey">1分钟</span>-->
          <!--<avatar-list size="mini">-->
            <!--<avatar-list-item *ngFor="let m of item.members" [src]="m.avatar" [tips]="m.name"></avatar-list-item>-->
          <!--</avatar-list>-->
        <!--</div>-->
      </nz-card>
    </nz-list-item>
  </ng-template>
</nz-list>
